<template>
  <div class="mate-remote-outer">
    <div class="left-panel">
      <tree-remote @select-tree-node="selectTreeNode"></tree-remote>
    </div>
    <div class="content-panel" ref="contentRef">
      <!-- 文件夹信息 -->
      <div v-if="curNode && curNode.nodeType !== 'file'" style="height: 100%">
        <Table :data="fileList" :columns="fileColumn" :height="curHeight">
          <template slot="name" slot-scope="{ row }">
            <Icon
              :type="row.type === 'folder' ? 'md-folder' : 'ios-document-outline'"
              :style="{ 'font-size': row.type === 'folder' ? '16px' : '18px' }"
              style="margin-right: 4px"
            />
            {{ row.name }}
          </template>
          <template slot="type" slot-scope="{ row }">{{ row.type === 'folder' ? '文件夹' : row.type }}</template>
          <template slot="lastModified" slot-scope="{ row }">{{ formatDate(row.lastModified) }}</template>
          <template slot="size" slot-scope="{ row }">{{ row.type === 'folder' ? '' : formatSize(row.size) }}</template>
        </Table>
      </div>
      <!-- 文件信息 -->
      <div v-if="curNode && curNode.nodeType === 'file'" style="padding: 16px">
        <div v-if="curFile">
          <div>文件名称: {{ curFile.name }}</div>
          <div>文件类型: {{ curFile.type }}</div>
          <div>文件大小: {{ curFile.size }}</div>
          <div>修改时间: {{ curFile.lastModified }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { format } from 'date-fns';
import MateRemoteConst from './MateRemoteConst';
import TreeRemote from './TreeRemote.vue';

export default {
  components: { TreeRemote },
  name: 'MateRemote',
  data() {
    return {
      fileColumn: MateRemoteConst.singleFileColumn,

      curNode: null,

      fileList: [],
      curFile: {
        name: null,
      },

      curHeight: 600,
    };
  },
  computed: {},
  methods: {
    formatDate(param) {
      return format(new Date(param), 'YYYY/MM/DD HH:mm');
    },
    formatSize(param) {
      return (param / 1024).toFixed(0) + ' KB';
    },
    selectTreeNode(curNode) {
      this.curNode = curNode;
      // 获取file
      if (curNode.nodeType === 'file') {
        this.curFile = curNode.fileInfo;
      } else {
        this.fileList = curNode.children.map(item => {
          return item.fileInfo;
        });
      }
    },
    calcCurHeight() {
      this.curHeight = this.$refs.contentRef.clientHeight;
    },
  },

  mounted() {
    this.calcCurHeight();
  },
};
</script>

<style scoped>
.mate-remote-outer {
  display: flex;
}
.left-panel {
  height: 100%;
  width: 240px;
  border-right: 1px solid #cccccc;
}
.content-panel {
  height: 100%;
  width: calc(100% - 240px);
}
</style>
